<template>
  <div class="index">
    <div class="top">
      <div class="community">{{quarters.name}}出入登记</div>
      <div class="qua_address"
           v-if="quarters.address">{{quarters.address}}</div>
    </div>

    <van-notice-bar @click="notice"
                    :text="quarters.noticemsg"
                    left-icon="volume-o" />

    <van-panel v-if="!isinfoComplete"
               title="人员信息"
               status="(填写一次,在个人中心更改)"
               desc="必填">

      <van-field v-model="user.name"
                 required
                 label="姓名"
                 placeholder="请输入姓名" />
      <van-field v-model="user.phone"
                 required
                 type="tel"
                 label="手机号"
                 placeholder="请输入手机号" />
      <van-field v-model="user.idnumber"
                 label="身份证(选填)"
                 placeholder="请输入身份证" />

    </van-panel>

    <van-panel v-if="!isinfoComplete"
               title="详细地址"
               status="(填写一次)"
               desc="必填">
      <van-cell center
                title="是否是本小区/单位人员">
        <van-switch v-model="user.islocal"
                    slot="right-icon"
                    size="24" />
      </van-cell>

      <div v-if="!user.islocal">
        <van-field readonly
                   clickable
                   required
                   label="来源地"
                   :value="user.sourcecity"
                   placeholder="请选择来源城市"
                   @click="showCity = true" />
        <van-popup v-model="showCity"
                   position="bottom">
          <van-area :area-list="areaList"
                    :columns-placeholder="['请选择', '请选择', '请选择']"
                    title="选择城市"
                    @confirm="communitycity"
                    @cancel="cancelCity" />
        </van-popup>
        <van-field v-model="user.address"
                   required
                   label="详细地址"
                   placeholder="请输入详细地址" />
      </div>

      <van-field v-model="user.housenumber"
                 required
                 label="到访门牌号"
                 placeholder="如(1号楼1单元0101室)" />

    </van-panel>

    <van-panel title="出行方式"
               desc="必填">

      <van-field readonly
                 clickable
                 required
                 label="出行方式"
                 :value="user.tripmode"
                 placeholder="请选择出行方式"
                 @click="showPicker = true" />
      <van-popup v-model="showPicker"
                 position="bottom">
        <van-picker show-toolbar
                    :columns="columns"
                    @cancel="showPicker = false"
                    @confirm="onConfirm" />
      </van-popup>

      <van-field v-if="isCarNumber"
                 v-model="user.carnumber"
                 required
                 label="车牌号码"
                 placeholder="请输入车牌号" />
      <van-cell center
                class="van-cell--required"
                title="进出选择">
        <van-radio-group v-model="user.inout">
          <van-radio name="1"
                     shape="square">进入</van-radio>
          <van-radio name="2"
                     shape="square">出门</van-radio>
        </van-radio-group>
      </van-cell>

    </van-panel>

    <van-panel title="健康状态"
               desc="必填">
      <van-cell center
                class="van-cell--required"
                title="体温">
        <van-stepper v-model="user.temperature"
                     step="0.1"
                     min="34"
                     max="41"
                     default-value="36" />
      </van-cell>
      <van-cell center
                title="是否有以下症状(若无则不勾选)">
      </van-cell>
      <van-checkbox-group v-model="symptom">
        <van-checkbox name="咳嗽"
                      shape="square">咳嗽</van-checkbox>
        <van-checkbox name="浑身乏力"
                      shape="square">浑身乏力</van-checkbox>
        <van-checkbox name="发烧"
                      shape="square">发烧</van-checkbox>
      </van-checkbox-group>

    </van-panel>

    <van-button type="primary"
                block
                @click="submit">提交信息</van-button>
    <bottomTabbar />
  </div>
</template>

<script>
//引入底部组件
import bottomTabbar from '@/components/bottomTabbar'
import area from '@/assets/js/area.js'
import { Dialog, Notify, Toast } from 'vant'
import { setTimeout } from 'timers';
export default {
  name: 'index',
  //部件
  components: {
    bottomTabbar,
  },
  data () {
    return {
      user: {
        name: '',//姓名
        phone: '', //电话
        idnumber: '', //身份证号
        islocal: true, //是否本地人
        tripmode: '',//出行方式
        sourcecity: '',//来源城市
        address: '',//详细地址
        carnumber: '',
        symptomstr: '', //症状拼接字符串
        housenumber: '', //门牌号
        inout: 0,//进出小区
        xqid: '',//小区id
      },
      symptom: [],//症状
      areaList: area,
      columns: ['步行', '自行车', '电动车', '汽车', '其他'],
      showPicker: false,
      showCity: false,
      isCarNumber: false,
      detailsAddress: false,//详细地址
      isinfoComplete: false,//信息是否完整
      quarters: {
        name: '',//小区名称
        address: '',//小区地址
        noticemsg: '进出小区必须佩戴口罩,接受体温检测', //小区公告
      },
    }
  },
  async created () {
    if (!this.$route.query.xqid) {
      this.user.xqid = localStorage.getItem("xqid")
    } else {
      localStorage.setItem("xqid", this.$route.query.xqid)
      this.user.xqid = this.$route.query.xqid
    }

    let getQuarters = await this.axios.get(this.api.getQuarters, { params: { xqid: this.user.xqid } })
    if (getQuarters.code == 200) {
      this.quarters.name = getQuarters.data.name
      this.quarters.address = getQuarters.data.address
      this.isinfoComplete = getQuarters.data.isinfoComplete == 1 ? true : false
      return
    }
    Notify({ type: 'danger', message: getQuarters.msg })
    localStorage.removeItem('token')
    window.location.href = window.location.host
  },

  methods: {
    notice () {
      Dialog({ title: '通知', message: this.quarters.noticemsg });
    },
    onConfirm (value) {
      if (value == '汽车') {
        this.isCarNumber = true
      } else {
        this.isCarNumber = false
        this.user.carnumber = ''
      }
      this.user.tripmode = value
      this.showPicker = false
    },
    //提交信息
    async submit () {
      const { user, symptom, isCarNumber } = this
      if (user.islocal == true) {
        user.address = null
        user.sourcecity = ''
      }
      let symptomstr = ''
      if (symptom.length) {
        symptom.forEach(item => symptomstr += item + ' ')
      } else {
        symptomstr = '无'
      }
      user.symptomstr = symptomstr
      //校验数据
      if (!this.isinfoComplete) {
        if (!user.name.trim()) {
          return Notify({ type: 'danger', message: '请输入姓名' })
        } else if (!(/^1[3456789]\d{9}$/.test(user.phone))) {
          return Notify({ type: 'danger', message: '请输入正确手机号' })
        } else if (!user.housenumber.trim()) {
          return Notify({ type: 'danger', message: '请输入到访门牌号' })
        } else if (user.idnumber.trim()) {
          if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(user.idnumber) === false) {
            return Notify({ type: 'danger', message: '请输入正确的身份证号' })
          }
        }
      }


      if (!user.tripmode.trim()) {
        return Notify({ type: 'danger', message: '请选择出行方式' })
      } else if (user.inout == 0) {
        return Notify({ type: 'danger', message: '请选择进出小区' })
      }
      //判断出行方式是否为汽车
      if (isCarNumber) {
        if (!user.carnumber.trim()) {
          return Notify({ type: 'danger', message: '请选择您的车牌' })
        }
      }
      //不是本小区
      if (!user.islocal) {
        if (!user.sourcecity.trim()) {
          return Notify({ type: 'danger', message: '请选择您的来源地' })
        } else if (!user.address.trim()) {
          return Notify({ type: 'danger', message: '请填写详细地址' })
        }
      }

      Toast.loading({
        message: '提交中...',
        forbidClick: true
      });
      //提交数据
      const register = await this.axios.post(this.api.register, user)
      if (register.code == 200) {
        Notify({ type: 'success', message: '提交成功,感谢您的配合' })
        setTimeout(() => {
          this.$router.push('/personal')
        }, 1000)
      } else {
        Notify({ type: 'danger', message: register.msg })
      }
      Toast.clear()
    },

    //来源地
    communitycity (cityArr) {
      const res = cityArr.find(item => item.code == '' && item.name == '')
      if (!res) {
        this.showCity = false
        let str = ''
        cityArr.forEach(item => str += item.name + ' ')
        this.user.sourcecity = str
        this.detailsAddress = true
      }
    },
    //取消选择城市
    cancelCity () {
      this.showCity = false
    },

  }

}
</script>

<style lang="scss" scoped>
.index {
  padding-bottom: 60px;
}
.van-panel__header {
  .van-cell__title {
    & > span {
      font-weight: bold;
      font-size: 18px;
    }
  }
}

.van-cell__label {
  color: #ee0a24;
}
.van-checkbox-group {
  display: flex;
  padding: 20px;
  font-size: 15px;
  .van-checkbox {
    padding: 0 10px;
  }
}
.top {
  padding: 10px 0;
  .community {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qua_address {
    font-size: 14px;
    text-align: center;
    color: #dcdcdc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}
.van-radio-group {
  display: flex;
  justify-content: flex-end;
  .van-radio {
    padding: 0 6px;
  }
}
</style>
